<!DOCTYPE html>
<link rel="stylesheet" href="assets/css/dropzone.css" />
<meta charset="utf-8" />

<div class="page-content">
	<div class="page-header">
		<h1>
			Dropzone.js <small> <i class="icon-double-angle-right"></i>
				Drag &amp; drop file upload with image preview
			</small>
		</h1>
	</div>
	<!-- /.page-header -->

	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->

			<div class="alert alert-info">
				<i class="icon-hand-right"></i> Please note that demo server is not
				configured to save uploaded files, therefore you may get an error
				message.
				<button class="close" data-dismiss="alert">
					<i class="icon-remove"></i>
				</button>
			</div>

			<div id="dropzone">
				<form id="myDropzone" class="dropzone" method="post"
					enctype="multipart/form-data"></form>
			</div>

			<button id="submit-all" disabled="disabled"
				class="btn btn-primary btn-block">上传</button>
			<!-- PAGE CONTENT ENDS -->
		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->
</div>




<!-- page specific plugin scripts -->

<script src="assets/js/dropzone.js"></script>



<script type="text/javascript">
	jQuery(function($) {

		try {
			$("#myDropzone").dropzone({
				url : "/media/upload/",
				paramName : "files",
				maxFilesize : 0.5, // MB
				addRemoveLinks : true,
				dictDefaultMessage : '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> 拖拽文件</span> 上传 \
												<span class="smaller-80 grey">(或点击)</span> <br /> \
												<i class="upload-icon icon-cloud-upload blue icon-3x"></i>',
				dictResponseError : 'Error while uploading file!',

				//change the previewTemplate to use Bootstrap progress bars
				previewTemplate : "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",

				//添加上传取消和删除预览图片的链接，默认不添加
				addRemoveLinks : true,
				//关闭自动上传功能，默认会true会自动上传
				//也就是添加一张图片向服务器发送一次请求
				autoProcessQueue : false,
				//允许上传多个照片
				uploadMultiple : true,
				//每次上传的最多文件数，经测试默认为2，坑啊
				//记得修改web.config 限制上传文件大小的节
				parallelUploads : 100,
				init : function() {
					var submitButton = document.querySelector("#submit-all")
					myDropzone = this; // closure

					//为上传按钮添加点击事件
					submitButton.addEventListener("click", function() {
						//手动上传所有图片
						myDropzone.processQueue();
					});

					//当添加图片后的事件，上传按钮恢复可用
					this.on("addedfile", function() {
						$("#submit-all").removeAttr("disabled");

					});

					//当上传完成后的事件，接受的数据为JSON格式
					this.on("complete", function(data) {
						bootbox.alert({
							message : data,
							size : 'small'
						});

					});

					//删除图片的事件，当上传的图片为空时，使上传按钮不可用状态
					this.on("removedfile", function() {
						if (this.getAcceptedFiles().length === 0) {
							$("#submit-all").attr("disabled", true);
						}
					});

				}
			});
		} catch (e) {
			alert('Dropzone.js does not support older browsers!');
		}

	});
</script>

